import React, {FC} from 'react';
import {View, Text, Image, StyleSheet, TextInput} from 'react-native';
import Heart from '../../components/Heart';
import ArticleDetailStore from '../../stores/ArticleDetailStore';
import icon_edit_comment from '../../assets/icon_edit_comment.png';
import icon_collection from '../../assets/icon_collection.png';
import icon_collection_selected from '../../assets/icon_collection_selected.png';
import icon_comment from '../../assets/icon_comment.png';
import {observer} from 'mobx-react';
type PropsType = {};
const Bottom: FC<PropsType> = observer(() => {
  const {isFavorite, favoriteCount, isCollection, collectionCount, comments} =
    ArticleDetailStore.detail;
  return (
    <View style={styles.bottomLayout}>
      <View style={styles.editLayout}>
        <Image source={icon_edit_comment} style={styles.editImg} />
        <TextInput placeholder="说点什么..." placeholderTextColor="#999" />
      </View>
      <Heart size={24} value={isFavorite} />
      <Text style={styles.bottomTxt}>{favoriteCount}</Text>
      <Image
        source={isCollection ? icon_collection_selected : icon_collection}
        style={styles.bottomImg}
      />
      <Text style={styles.bottomTxt}>{collectionCount}</Text>
      <Image source={icon_comment} style={styles.bottomImg} />
      <Text style={styles.bottomTxt}>{comments?.length || 0}</Text>
    </View>
  );
});

const styles = StyleSheet.create({
  bottomLayout: {
    width: '100%',
    height: 64,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  editLayout: {
    flexDirection: 'row',
    height: 40,
    backgroundColor: '#f0f0f0',
    borderRadius: 20,
    alignItems: 'center',
    flex: 1,
    marginRight: 8,
    paddingHorizontal: 8,
  },
  editImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
    tintColor: '#333',
  },
  bottomTxt: {
    fontSize: 14,
    color: '#333',
    marginLeft: 4,
  },
  bottomImg: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
    marginLeft: 8,
  },
});
export default Bottom;
